
* {
    margin: 0;
    padding: 0;
    font-family: '微软雅黑', 'Microsoft YaHei', 'Microsoft Sans Serif', 'sans-serif', 'serif', 'cursive';
}

@import "define.css";
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
html{
    background: red;
}
body {
    background: #fff;
}

.body {
    flow: horizontal;
}
.loading{
    position: absolute;
    left: 0;
    top: 30px;
    z-index: 99999999999;
    width: 100%;
    height: 100%;
    background: #fff0;
    flow:horizontal;
    vertical-align: middle;
    horizontal-align:center;
}
.connection-list {
    width: 200px;
    height: calc(100vh - 30px);
    box-sizing: border-box;
    border-right: 1px solid @divider;
}

.connection-list .add {
    height: 50px;
    flow: 1;
    horizontal-align: center;
    vertical-align: middle;
    border-bottom: 1px solid @divider;
}

.connection-list .c-list {
    width: 100%;
    height: calc(100vh - 82px);
    overflow: @scroll;
}

.none {
    width: 80%;
    margin: 0 auto;
    padding-top: 30px;
    text-align: center;
    line-height: center;
    color: @disable;
    font-size: 12px;
}

.list-item {
    position: relative;
}

.list-item-connected {
    content: 'on';
    position: absolute;
    right: 30px;
    top: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid @primary;
    font-size: 8px;
    line-height: 8px;
    color: @primary;
}

.toggle-item {
    position: relative;
}

.toggle-item .title {
    padding: 0 15px;
    flow: horizontal;
    border-spacing: *;
    vertical-align: middle;
    height: 30px;
    box-sizing: border-box;
    border-bottom: 1px solid @border;
}

.toggle-item .title .title-name {
    width: 150px;
    height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 30px;
}

.toggle-item .title:nth-child(0) {
    border-top: none;
}

.toggle-item .title:hover {
    background: @background;
}

.toggle-item .open {
    position: sticky;
    top: 0;
    left: 0;
    color: @primary;
}

.toggle-item .open::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 30px;
    width: 2px;
    background: @primary;
}

.folder-action {
    padding: 5px 15px;
    flow: horizontal;
    border-spacing: *;
    horizontal-align: center;
    vertical-align: middle;
}

.ac-btn {
    width: 50px;
    padding: 0;
    font-size: 10px;
    line-height: 22px !important;
}

.folder-open {
    border-bottom: 1px solid @border;
}

.db-item {
    padding: 5px 15px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
}

.db-item:hover {
    background: @background;
}

.db-item:first-child {
    border-top: 1px solid @border;
}

.db-connected {
    color: @primary;
    background: @background;
}

.db-connected::after {
    content: "使用中";
    line-height: 8px;
    font-size: 8px;
    position: absolute;
    right: 15px;
    top: 50%;
    padding: 2px 5px;
    margin-top: -8px;
    border-radius: 4px;
    border: 1px solid @primary;
}

.frame-warp {
    height: calc(100vh - 30px);
    width: 1*;
}

.no-connect {
    width: 100%;
    height: 100%;
    flow: horizontal;
    horizontal-align: center;
    vertical-align: middle;
    text-align: center;
    color: @content;
}

.tabs {
    width: 100%;
    height: 30px;
    flow: horizontal;
    border-bottom: 1px solid @border;
    font-size: 12px;
    position: relative;
    z-index: 9;
}

.tabs .is-show-conn-list {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
}

.tabs .tab {
    width: 80px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    position: relative;
    cursor: pointer;
}

.tabs .tab-active {
    color: @primary;
    background: @background;
    position: relative;
}

.tabs .tab-active::after {
    content: "";
    position: absolute;
    width: 80px;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid @primary;
}

.tab-panel {
    width: 100%;
    height: calc(100vh - 60px);
    overflow: hidden;
}


.tab-panel-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: @scroll;
}

.container {
    padding: 15px 15px 0 15px;
}

.container .block {
    flow: horizontal;
    horizontal-align: left;
    box-sizing: border-box;
    border: 1px solid @border;
    margin-bottom: 15px;
    border-radius: 4px;
    overflow: hidden;
}

.item-icon {
    width: 150px;
    height: 1*;
    flow: horizontal;
    horizontal-align: center;
    font-size: 50px;
    background: @background;
}

.item-icon .icon {
    margin-top: *;
    margin-bottom: *;
}

.block .item-list {
    width: 1*;
    flow: horizontal-warp;
    horizontal-align: left;
    vertical-align: top;
    border-left: 1px solid @border;
}

.block .item-list .row {
    width: 1*;
    flow: horizontal;
    horizontal-align: left;
    padding: 5px 0;
    border-bottom: 1px solid @border;
}

.block .item-list .row:last-child {
    border-bottom: none;
}

.block .item-list .row:hover {
    background: @background;
}

.block .item-list .label {
    width: 220px;
    border-right: 1px solid @border;
    text-indent: 1em;
}

.block .item-list .text {
    width: 1*;
    text-align: left;
    text-indent: 1em;
}
.block .item-list .database-name{
    width: 100px;
    height: 1*;
    flow:horizontal;
    horizontal-align:center;
    vertical-align: middle;
    border-right:1px solid @border;
}
.block .item-list .database-info{
    width: 1*;
    flow:vertical;
    horizontal-align:center;
    vertical-align: middle;
}
.block .item-list .database-info .database-row {
    padding: 5px 0;
    width: 1*;
    flow:horizontal;
    border-bottom: 1px solid @border;
}
.block .item-list .database-info .database-row .label{
    width: 120px;
}
.block .item-list .database-info .database-row:last-child{
    border-bottom: none;
}
@import "data.css";